<template>
  <border-box :variant="variant">
    <div class="stat-card" :class="[`stat-card-${variant}`, { 'is-dark': isDark }]">
      <div class="stat-icon">
        <slot name="icon">
          <component :is="icon" v-if="icon" />
        </slot>
      </div>
      <div class="stat-title">{{ title }}</div>
      <digital-flop
        :value="value"
        :color="digitColor"
        :duration="duration"
        class="stat-value"
      />
    </div>
  </border-box>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'
import BorderBox from './BorderBox.vue'
import DigitalFlop from './DigitalFlop.vue'

interface Props {
  title: string
  value: number
  icon?: any
  variant?: 'primary' | 'success' | 'warning' | 'danger'
  duration?: number
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  duration: 1500
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const digitColor = computed(() => {
  const colors = {
    light: {
      primary: '#409eff',
      success: '#67c23a',
      warning: '#e6a23c',
      danger: '#f56c6c'
    },
    dark: {
      primary: '#00d4ff',
      success: '#00ff88',
      warning: '#ffaa00',
      danger: '#ff4466'
    }
  }
  
  return isDark.value ? colors.dark[props.variant] : colors.light[props.variant]
})
</script>

<style lang="scss" scoped>
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 140px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 1) 50%,
    rgba(255, 255, 255, 0.98) 100%
  );
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  
  // 添加微妙的光泽效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.3), 
      transparent
    );
    transition: left 0.5s;
  }
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.1),
      0 4px 8px rgba(0, 0, 0, 0.06);
    
    &::before {
      left: 100%;
    }
  }
  
  .stat-icon {
    font-size: 36px;
    margin-bottom: 12px;
    animation: iconFloat 3s ease-in-out infinite;
    
    :deep(.el-icon) {
      font-size: 36px;
    }
  }
  
  .stat-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .stat-value {
    font-size: 32px;
  }
  
  // 不同变体的图标颜色
  &.stat-card-primary .stat-icon {
    color: #409eff;
  }
  
  &.stat-card-success .stat-icon {
    color: #67c23a;
  }
  
  &.stat-card-warning .stat-icon {
    color: #e6a23c;
  }
  
  &.stat-card-danger .stat-icon {
    color: #f56c6c;
  }
  
  // 暗黑主题
  &.is-dark {
    background: linear-gradient(135deg, 
      rgba(10, 25, 41, 0.6) 0%, 
      rgba(15, 30, 48, 0.8) 50%,
      rgba(10, 25, 41, 0.7) 100%
    ) !important;
    box-shadow: 
      0 0 20px rgba(0, 212, 255, 0.15),
      inset 0 0 30px rgba(0, 212, 255, 0.05),
      0 4px 12px rgba(0, 0, 0, 0.3) !important;
    
    &::before {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 212, 255, 0.1), 
        transparent
      );
    }
    
    &:hover {
      box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.25),
        inset 0 0 40px rgba(0, 212, 255, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    .stat-icon {
      filter: drop-shadow(0 0 10px currentColor);
    }
    
    .stat-title {
      color: #00d4ff;
      text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
    }
    
    &.stat-card-primary .stat-icon {
      color: #00d4ff;
    }
    
    &.stat-card-success .stat-icon {
      color: #00ff88;
    }
    
    &.stat-card-warning .stat-icon {
      color: #ffaa00;
    }
    
    &.stat-card-danger .stat-icon {
      color: #ff4466;
    }
  }
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>
